<script setup>
import tableData from "../bigData";
const loading = ref(false);
const showTable = ref(false);
const renderTime = ref(null);

onMounted(() => {
  // 先展示 loading
  loading.value = true;
  // 200ms 后再修改 table 是否显示，防止和 loading 合并到一个渲染周期，导致 loading 不显示
  setTimeout(() => {
    const startTime = new Date().getTime();
    showTable.value = true;
    loading.value = false;
    // 不用nextTick, 使用nextTick无效, setTimemout宏任务塞入任务队列于页面进程解析生成后执行
    setTimeout(() => (renderTime.value = (new Date().getTime() - startTime) / 1000), 0);
  }, 200);
});
</script>

<template>
  <PageMain
    name="普通表格"
    v-loading="loading"
    element-loading-text="数据加载中..."
  >
    <template #header> 渲染耗时: {{ renderTime }}秒 - 10000条简单数据 </template>
    <el-table
      v-if="showTable"
      :data="tableData"
    >
      <el-table-column
        label="Id"
        prop="id"
      />
      <el-table-column
        label="名称"
        prop="name"
      />
      <el-table-column
        label="时间戳"
        prop="time"
      />
    </el-table>
  </PageMain>
</template>
